<!doctype html>
<html class="no-js">

<head>
    <title>订单详情</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/orderInfo.css">
</head>

<body>
    <div id="app">
        <div class="top-background"></div>
        <div class="top-tips am-g" :style="topTipStyle">
            <div class="am-u-sm-1 top-tips-bell"><i class="am-icon-bell-o"></i></div>
            <div class="am-u-sm-10 top-tips-content">为了您的财产安全，不要点击陌生链接，不要向任何人透露银行卡或验证码信息，谨防诈骗！</div>
            <div class="am-u-sm-1 top-tips-close"><a href="javascript:" @click="hideTopTip"><i class="am-icon-close"></i></a></div>
        </div>
        <div class="top-info">
            <span v-if="${(orderInfo.status)!} == 0"><i class="am-icon-exclamation-triangle"></i>&nbsp;待付款</span>
            <span v-if="${(orderInfo.status)!} == 1"><i class="am-icon-check-circle-o"></i>&nbsp;已付款</span>
            <span v-if="${(orderInfo.status)!} == 2"><i class="am-icon-close"></i>&nbsp;已取消</span>
        </div>
        <div class="order-container">
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">订单详情</div>
                <div class="am-panel-bd">
                    <#list productList as prod>
                        <a href="/tg/product/getProductById?id=${prod.productId!}">
                            <div class="am-g">
                                <div class="am-u-sm-3 product-cover-container">
                                    <img class="am-img-responsive" src="${prod.cover!}" />
                                </div>
                                <div class="am-u-sm-9">
                                    <div class="product-title">${prod.name!}</div>
                                    <div class="product-info">${prod.size!}</div>
                                    <div class="product-price">￥${(prod.price/100.0)!0}</div>
                                </div>
                            </div>
                        </a>
                    </#list>
                </div>
            </div>
        </div>
        <div class="service" @click="alert('请联系公众号客服')">
            <span><i class="am-icon-headphones"></i>&nbsp;联系客服</span>
        </div>
        <div class="order-info-container">
            <div class="order-info-item">
                <span>订单编号：</span>
                <span>${(orderInfo.outTradeNo)!}</span>
            </div>
            <div class="order-info-item">
                <span>下单时间：</span>
                <span>${(orderInfo.startTime)!}</span>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
            <!-- <div class="order-info-item">
                <span>支付方式：</span>
                <span>${(orderInfo.payType)!}</span>
            </div> -->
            <div class="order-info-item">
                <span>配送方式：</span>
                <span>普通快递</span>
            </div>
        </div>
        <div class="address-container am-g">
            <div class="am-u-sm-1">
                <i class="am-icon-map-marker"></i>
            </div>
            <div class="am-u-sm-11">
                <div class="address-name">
                    <span>${name!}</span>
                    <span>${mobile!}</span>
                </div>
                <div class="address-info">
                    <span>地址：${address!}</span>
                </div>
            </div>
        </div>
        <div class="price-container">
            <!-- <div class="price-item">
                <span>商品总额：</span>
                <span>￥5999</span>
            </div>
            <div class="price-item">
                <span>运费：</span>
                <span>￥0</span>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider am-divider-default" /> -->
            <div class="price-real">
                <span>实付款：</span>
                <span>￥${(orderInfo.paid/100.0)!}</span>
            </div>
        </div>
        <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bottom-container" id="">
            <div class="am-g">
                <div class="am-navbar-nav am-cf am-u-sm-3">
                    <a href="/tg/">
                        <span class="am-icon-home"></span>
                        <span class="am-navbar-label">首页</span>
                    </a>
                </div>
                <div class="am-u-sm-9 bottom-buy-container">
                    <ul class="am-cf">
                        <li class="bottom-buy-li1">
                            <a href="#" @click="alert('请联系公众号客服')">
                                <span class="am-navbar-label">申请售后</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                topTipStyle: ''
            },
            methods: {
                hideTopTip: function() {
                    this.topTipStyle = 'display: none;';
                }
            }
        })
        wx.ready(function() {
            initWXShare()
        })
    </script>
</body>

</html>